---
title: Установка
description: Начнем работать с RainbowKit
---

# Установка

## Начнем работать с RainbowKit

### Быстрый старт

Вы можете создать новый проект с RainbowKit + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org) с помощью одной из следующих команд, используя менеджер пакетов на ваш выбор:

```bash
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit
```

Это предложит вам назвать проект, сформирует новую директорию с шаблонным проектом и установит все необходимые зависимости.

Вы можете также вручную интегрировать RainbowKit в существующий проект.

### Ручная настройка

Установите RainbowKit и его зависимые библиотеки: [wagmi](https://wagmi.sh/), [viem](https://viem.sh) и [@tanstack/react-query](https://tanstack.com/query/v5).

```bash
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
```

> Примечание: RainbowKit это библиотека для [React](https://reactjs.org/).

#### Импорт

Импортируйте RainbowKit, Wagmi и TanStack Query.

```tsx
import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";
```

#### Настройка

Настройте необходимые цепочки и создайте требуемые коннекторы. Вам также потребуется настроить конфигурацию `wagmi`. Если ваше приложение использует серверный рендеринг (SSR), обязательно установите `ssr` в `true`.

> Примечание: Каждое приложение, работающее с WalletConnect, теперь должно получить `projectId` от [WalletConnect Cloud](https://cloud.walletconnect.com/). Это абсолютно бесплатно и занимает всего несколько минут.

```tsx line=4-99
...
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});
```

#### Оборачивание провайдеров

Обратите ваше приложение с `RainbowKitProvider`, [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider), и [`QueryClientProvider`](https://tanstack.com/query/v4/docs/framework/react/reference/QueryClientProvider).

```tsx
const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};
```

#### Добавьте кнопку подключения

Затем в вашем приложении импортируйте и отобразите компонент `ConnectButton`.

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

RainbowKit теперь будет управлять выбором кошелька пользователя, отображать информацию о кошельке/транзакции и обрабатывать переключение сети/кошелька.

#### Дополнительная настройка инструментов сборки

Некоторые инструменты сборки требуют дополнительной настройки.

##### Remix

При использовании [Remix](https://remix.run) вы должны выполнить полифилы модулей `buffer`, `events` и `http`. Смотрите ниже конфигурацию для Remix или [наш пример проекта Remix](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-remix).

```ts
/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};
```

### Подготовка к деплою

По умолчанию ваше приложение использует публичные RPC-провайдеры для каждой цепочки для получения балансов, разрешения имени ENS и многого другого. Это может часто вызывать проблемы с надежностью для ваших пользователей, так как публичные узлы имеют лимиты. Вместо этого вам следует приобрести доступ к RPC-провайдеру через такие сервисы, как [Alchemy](https://www.alchemy.com/) или [QuickNode](https://www.quicknode.com/), и определить собственные транспорты в Wagmi. Это можно сделать, добавив параметр `transports` в `getDefaultConfig` или напрямую через Wagmi's `createConfig`.

Транспорт — это промежуточный сетевой слой, который обрабатывает отправку JSON-RPC запросов провайдеру узлов Ethereum (таким как Alchemy, Infura и другим).

**Пример с использованием `http` транспорта**

```tsx
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});
```

Для более подробной информации смотрите [документацию по транспорту wagmi](https://wagmi.sh/core/api/transports#transports).

### Добавьте свою функциональность

Теперь, когда ваши пользователи могут подключать свои кошельки, вы можете начать разворачивать оставшуюся часть приложения с помощью [wagmi.](https://wagmi.sh)

Отправка транзакций, взаимодействие с контрактами, разрешение деталей ENS и многое другое с использованием обширного набора React Hook от wagmi.

Для более детальной информации смотрите [документацию wagmi.](https://wagmi.sh)

### Дополнительные примеры

Чтобы увидеть действующие примеры RainbowKit или даже использовать их для автоматической генерации нового проекта, посмотрите [официальные примеры](https://github.com/rainbow-me/rainbowkit/tree/main/examples).

Чтобы попробовать RainbowKit прямо в вашем браузере, ознакомьтесь со следующими ссылками на CodeSandbox:

- с [Create React App](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app)
- с [Next.js](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next)
- с [Next.js App Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next-app)
- с [Remix](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-remix)
- с [Vite](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-vite)
- с [React Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-react-router)
